<!--
 * @Author: 13212657520 10828485+zhaosieve@user.noreply.gitee.com~
 * @Date: 2022-05-27 16:50:19
 * @LastEditors: 13212657520 10828485+zhaosieve@user.noreply.gitee.com~
 * @LastEditTime: 2022-05-30 21:09:42
 * @FilePath: \vue-2202\src\views\shops\shopinnfo\shopinnfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="shopinnfo">
    <van-grid :column-num="1">
      <van-grid-item v-for="value in 1" :key="value" :icon="img_url" />
    </van-grid>

    <van-panel :title="getInfoList.title">
      <div class="connten">
        <div>
          <span class="sell_price">现价：${{ getInfoList.sell_price }}</span>
          <span class="market_price">原价:${{ getInfoList.market_price }}</span>
        </div>
        <div class="connten_nmb">
          <span>购买数量:</span>
          <van-stepper v-model="value" />
        </div>
      </div>
    </van-panel>

    <van-panel :title="getInfoList.goods_no">
      <div class="connten2">
        <p>商品货号：{{ getInfoList.goods_no }}</p>
        <p>库存情况：{{ getInfoList.add_time }}</p>
        <p>上驾时间：{{ getInfoList.stock_quantity }}</p>
      </div>
    </van-panel>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :info="getAllCount"
        to="/cart"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="01" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="jonShopCar"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <comment :id="id"></comment>
  </div>
</template>
<script>
import { info, allGoods } from "@/api";
import Comment from "@/components/Comment";
import { mapGetters } from "vuex";
export default {
  data() {
    return { getInfoList: {}, value: 0, all: [], img_url: "" };
  },
  props: ["id"],
  methods: {
    async getInfo() {
      console.log(this.id);
      // console.log(this.$router.history.current.params.id);
      // console.log(id);
      const res = await info(this.id);
      this.getInfoList = res.data.message;
      // console.log(this.getInfoList);
    },
    async allShops() {
      const res = await allGoods(this.id);
      this.all = res.data.message;
      console.log(this.all);
      this.img_url = this.all[0].src;
      // console.log(this.img_url);
      // console.log(res.data.message);
    },
    // async gogo() {
    //   await Comments(1, 1, 20);
    // },
    jonShopCar() {
      const shopinnfo = {
        id: this.id,
        title: this.getInfoList.title,
        icon: this.img_url,
        count: this.value,
        completed: true,
        price: this.getInfoList.sell_price,
      };
      this.$store.commit("car/ADD_CAR", shopinnfo);
    },
  },
  created() {
    this.allShops();
    this.getInfo();
    // this.gogo();
  },
  components: {
    Comment,
  },
  computed: {
    ...mapGetters("car", ["getAllCount"]),
  },
};
</script>
<style lang="scss">
.shopinnfo {
  padding: 10px;
  .van-cell__title {
    font-weight: 600;
    font-size: 16px;
  }
  .sell_price {
    color: red;
    font-size: 14px;
  }
  .market_price {
    text-decoration: line-through;
    font-size: 14px;
    margin-left: 20px;
  }
  .connten {
    margin-top: 10px;
    padding: 0 15px;
    box-sizing: border-box;
    margin-top: 10px;
    // border: 1px solid #eee;
  }
  .connten_nmb {
    display: flex;
    margin-top: 10px;
    .van-stepper {
      margin-left: 10px;
    }
  }
  .connten2 {
    padding: 0 15px;
    margin-top: 10px;

    p {
      font-size: 14px;
    }
  }
  .van-cell-group {
    border: 1px solid #eee;
    margin-top: 10px;
  }
  .van-goods-action {
    z-index: 100;
  }
  .van-grid-item__icon {
    font-size: 180px;
  }
}
</style>
